import introJs from 'intro.js'
import 'intro.js/introjs.css'

/**
 * @name: 新手指导
 * @param {String} pathname 当前页面的path
 * @param {Array} stepsArr 步骤内容（包括element、intro）
 * @return {*}
 */
export function useIntro(pathname, stepsArr,finish) {
    let guideObj = JSON.parse(localStorage.getItem('ksd-guide')) || {}
    let introObj = introJs();
    if (!guideObj[pathname]) {
        guideObj[pathname] = '1'
        localStorage.setItem('ksd-guide', JSON.stringify(guideObj))
        introObj.setOptions({
            prevLabel: "上一步",
            nextLabel: "下一步",
            skipLabel: "✕",
            doneLabel: "完成",
            tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */,
            hidePrev: "true", // 隐藏第一步中的上一个按钮
            tooltipClass: "" /* 引导说明文本框的样式 */,
            highlightClass: "" /* 说明高亮区域的样式 */,
            exitOnOverlayClick: false /* 是否允许点击空白处退出 */,
            showStepNumbers: false /* 是否显示说明的数据步骤*/,
            keyboardNavigation: false /* 是否允许键盘来操作 */,
            showButtons: true /* 是否按键来操作 */,
            showBullets: true /* 是否使用点点点显示进度 */,
            showProgress: false /* 是否显示进度条 */,
            scrollToElement: true /* 是否滑动到高亮的区域 */,
            overlayOpacity: 0.6 /* 遮罩层的透明度 */,
            positionPrecedence: ["bottom", "top", "right", "left"] /* 当位置选择自动的时候，位置排列的优先级 */,
            disableInteraction: false, /* 是否禁止与元素的相互关联 */
            hintPosition: 'top-middle',
            steps: stepsArr
        })
        introObj.start()
    }

    return introObj;
}